<template>
  <div class="page-container-home-index">
    <!-- 头部公告区域 -->
    <announcement v-if="noticeArray.length>0" :notice="noticeArray"/>
    <!-- 头部信息区域 -->
    <top-info/>

    <!-- 快捷操作区 -->
    <QuickActions/>

    <!-- 主内容区域：左右两栏布局 -->
    <div class="main-content">
      <div class="main-content-left">
        <!-- 左栏（日历&任务）-->
        <TodayCourseColumn/>
        <TodayAntiForgetColumn
          v-if="antiForgetColumnType==='list'"
          @changeAntiForgetView="changeAntiForgetView"
        />
        <TodayAntiForgetColumnAggregateView
          v-if="antiForgetColumnType==='aggregate'"
          @changeAntiForgetView="changeAntiForgetView"
        />
      </div>

      <!-- 右栏（概览&数据）-->
      <!--      <RightColumn/>-->
      <div class="main-content-right">
        <!-- 数据统计卡片区 -->
        <StatisticsCards/>
        <!--        <RechargeRecord/>-->
      </div>
    </div>

    <!-- 数据统计卡片区 -->
    <!--    <StatisticsCards/>-->
  </div>
</template>

<script>
// 导入组件
import TodayCourseColumn from './infoCompconent/TodayCourseColumn.vue'
import TodayAntiForgetColumn from './infoCompconent/TodayAntiForgetColumn.vue'
import TodayAntiForgetColumnAggregateView from './infoCompconent/TodayAntiForgetColumnAggregateView.vue'
import StatisticsCards from './infoCompconent/StatisticsCards.vue'
import QuickActions from './infoCompconent/QuickActions.vue'
import TopInfo from '@/views/home/component/infoCompconent/TopInfo.vue'
import Announcement from '@/views/home/component/infoCompconent/Announcement.vue'

export default {
  name: 'InfoOne',
  components: {
    Announcement,
    TopInfo,
    TodayCourseColumn,
    StatisticsCards,
    QuickActions,
    TodayAntiForgetColumn,
    TodayAntiForgetColumnAggregateView
  },
  data() {
    return {
      noticeArray: [
        { content: '抗遗忘课程规划月度视图已上线，可前往「课程 ➡️ 抗遗忘」查看抗遗忘规划详情。' },
        { content: '学员端功能现已正式上线。点击首页快捷功能区按钮「学员端」可查看使用教程。诚邀广大用户体验使用。' },
        { content: '若您在系统使用过程中遇到操作异常、功能故障，或有优化建议、创意想法，欢迎通过「右上角头像 ➡️ 联系客服」通道与我们沟通。您的反馈是系统持续完善的重要参考，我们将认真对待每一条建议，感谢您的参与和支持！' }
      ],
      antiForgetColumnType: 'aggregate' // list | aggregate 列表或聚合
    }
  },
  methods: {
    changeAntiForgetView(type) {
      this.antiForgetColumnType = type
    }
  }
}
</script>
<style scoped>
.page-container-home-index {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;

  /* 主内容区域样式 */

  .main-content {
    display: flex;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .main-content-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .main-content-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* 响应式调整 */
  @media (max-width: 768px) {
    .main-content {
      flex-direction: column;
    }
  }
}
</style>
